<template>
    <div class="home">
        <el-header class="header">
            <img class="logo" src="../../assets/logo.png" alt="宠物医院">
            <div class="nav">
                <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">宠物医疗</el-menu-item>
                    <el-menu-item index="3">宠物美容</el-menu-item>
                    <el-menu-item index="4">宠物寄养</el-menu-item>
                    <el-menu-item index="5">关于我们</el-menu-item>
                </el-menu>
            </div>
        </el-header>
        <el-carousel interval="5000" height="400px">
            <el-carousel-item>
                <img class="carousel-image" src="../../assets/banner1.jpg" alt="宠物医院">
            </el-carousel-item>
            <el-carousel-item>
                <img class="carousel-image" src="../../assets/banner2.jpg" alt="宠物医院">
            </el-carousel-item>
            <el-carousel-item>
                <img class="carousel-image" src="../../assets/banner3.jpg" alt="宠物医院1">
            </el-carousel-item>
        </el-carousel>
        <div class="content">
            <div class="services">
                <div class="service-item">
                    <img class="service-icon" src="" alt="宠物医疗">
                    <h3 class="service-title">宠物医疗</h3>
                    <p class="service-description">我们提供全面的宠物医疗服务，包括预防接种、疾病治疗、手术等。</p>
                    <el-button class="service-button" type="primary">了解更多</el-button>
                </div>
                <div class="service-item">
                    <img class="service-icon" src="" alt="宠物美容">
                    <h3 class="service-title">宠物美容</h3>
                    <p class="service-description">我们的宠物美容师经验丰富，为您的宠物提供专业的美容护理服务。</p>
                    <el-button class="service-button" type="primary">了解更多</el-button>
                </div>
                <div class="service-item">
                    <img class="service-icon" src="" alt="宠物寄养">
                    <h3 class="service-title">宠物寄养</h3>
                    <p class="service-description">我们提供宽敞、舒适的宠物寄养服务，为您的宠物提供家庭式的照顾。</p>
                    <el-button class="service-button" type="primary">了解更多</el-button>
                </div>
                <div class="news">
                    <h2 class="news-title">最新动态</h2>
                    <div class="news-items">
                        <div class="news-item">
                            <img class="news-image" src="" alt="最新动态">
                            <div class="news-content">
                                <h3 class="news-item-title">宠物疫苗接种注意事项</h3>
                                <p class="news-item-description">随着宠物数量的增加，对宠物疫苗的需求也越来越高。然而，宠物疫苗接种也需要注意一些事项。</p>
                                <el-button class="news-button" type="text">查看详情</el-button>
                            </div>
                        </div>
                        <div class="news-item">
                            <img class="news-image" src="" alt="最新动态">
                            <div class="news-content">
                                <h3 class="news-item-title">宠物常见疾病预防</h3>
                                <p class="news-item-description">了解宠物常见疾病的预防方法，可以帮助宠物远离疾病的侵袭。</p>
                                <el-button class="news-button" type="text">查看详情</el-button>
                            </div>
                        </div>
                        <div class="news-item">
                            <img class="news-image" src="" alt="最新动态">
                            <div class="news-content">
                                <h3 class="news-item-title">如何给宠物剪指甲</h3>
                                <p class="news-item-description">给宠物剪指甲是一件重要的事情，但是很多人并不知道该如何操作，下面为您介绍一些方法。</p>
                                <el-button class="news-button" type="text">查看详情</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="about-us">
                    <h2 class="about-us-title">关于我们</h2>
                    <div class="about-us-content">
                        <p>宠物医院成立于2010年，是一家集宠物医疗、宠物美容和宠物寄养于一体的专业宠物医疗机构。我们的宠物医生和美容师均有多年经验，能够为您的宠物提供高质量的服务。</p>
                        <p>我们的医院设备齐全，环境舒适，为您的宠物提供最佳的医疗和护理环境。我们秉承“以爱心为本，以专业服务为先”的宗旨，致力于为宠物提供最好的服务。</p>
                        <el-button class="about-us-button" type="primary">了解更多</el-button>
                    </div>
                </div>
            </div>
            <el-footer class="footer">
                <p class="opyright">© 2023 宠物医院版权所有</p>
            </el-footer>
        </div>
    </div>
</template>
<script>
export default {
    name: "HomePage",
    data() {
        return {
            services: [
                {
                    name: "宠物医疗1",
                    description: "我们提供宠物的各种疾病治疗和手术服务。",
                    iconClass: "el-icon-medkit",
                },
                {
                    name: "宠物美容",
                    description: "我们提供各种宠物美容服务，让您的宠物更加可爱。",
                    iconClass: "el-icon-s-help",
                },
                {
                    name: "宠物寄养",
                    description: "我们提供宠物寄养服务，让您出行更加便捷。",
                    iconClass: "el-icon-s-home",
                },
            ],
        };
    },
};
</script>
<style scoped>
.home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

.banner {
    height: 400px;
    background-image: url("../../assets/banner1.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.banner h1 {
    font-size: 4rem;
    margin: 0;
}

.services {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

.service {
    width: 30%;
    text-align: center;
    padding: 30px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.service-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.service-title {
    font-size: 1.5rem;
    margin: 0;
}

.service-description {
    margin-top: 20px;
}

.news {
    margin-top: 50px;
}

.news-title {
    font-size: 2rem;
    margin: 0;
}

.news-items {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.news-item {
    width: 30%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.news-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
}

.news-item-title {
    font-size: 1.5rem;
    margin: 0;
}

.news-item-description {
    margin-top: 10px;
}

.about-us {
    margin-top: 50px;
    text-align: center;
}

.about-us-title {
    font-size: 2rem;
    margin: 0;
}

.about-us-content {
    margin-top: 30px;
    line-height: 1.8;
}

.about-us-button {
    margin-top: 30px;
}

.footer {
    margin-top: 50px;
    text-align: center;
    color: #999;
    font-size: 1rem;
}
</style>